<!--
 * @Author: Meow
 * @Date: 2019-10-10 20:22:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2019-10-24 14:30:47
 * @Description: 数据规则管理
 -->
<template>
  <div class="container">
    <div class="view">
      <div class="top tr">
        <div>
          规则名称：
          <el-input placeholder="规则名称"
                    v-model="ruleName"
                    size="small"
                    class="input-with-select">
          </el-input>
        </div>
        <div>
          制作对象：
          <el-select v-model="formulateObject">
            <el-option :label="item.dictName"
                       v-for="item in labelListData"
                       :key="item.dictId"
                       :value="item.dictId"></el-option>
          </el-select>
          <el-button type="primary"
                     size="small"
                     @click="search">搜索</el-button>
          <el-button type="primary"
                     size="small"
                     @click="addTableList">添加</el-button>
          <el-button type="danger"
                     size="small"
                     @click="deleteTableAll">删除</el-button>
        </div>

      </div>
      <div class="table">
        <el-scrollbar :native="false"
                      tag="section"
                      class="el-scroll">
          <el-table :data="tableData"
                    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                    v-loading="Loading"
                    element-loading-text="数据加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(21, 29, 54, 0.8)"
                    border
                    highlight-current-row
                    @selection-change="selChange">
            <el-table-column type="selection"
                             width="35"></el-table-column>
            <el-table-column align="center"
                             :show-overflow-tooltip="true"
                             prop="ruleName"
                             label="规则名称">
            </el-table-column>
            <el-table-column align="center"
                             :show-overflow-tooltip="true"
                             prop="formulateObject"
                             label="制定对象">
            </el-table-column>
            <el-table-column align="center"
                             :show-overflow-tooltip="true"
                             prop="ruleDescription"
                             label="规则描述">
            </el-table-column>
            <el-table-column align="center"
                             :show-overflow-tooltip="true"
                             prop="ruleExpression"
                             label="规则表达式">
            </el-table-column>
            <el-table-column label="操作"
                             width="400"
                             align="center">
              <template slot-scope="scope">
                <el-button size="mini"
                           :type="scope.row.status == '0'? 'success':'danger'"
                           @click="showStatus(scope.row)">{{scope.row.status == 0? '启用':'停用'}}</el-button>
                <el-button size="mini"
                           type="danger"
                           @click="deleteList(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
      <div class="bottom">
        <el-pagination layout="total, sizes, prev, pager, next"
                       background
                       :page-count="10"
                       :page-sizes="[5, 10, 20, 40]"
                       :page-size="page.pageSize"
                       :total="page.total"
                       :current-page="page.pageNum"
                       @current-change="changePage"
                       @size-change="sizeChange"></el-pagination>
      </div>
    </div>
    <!-- 点击添加按钮  弹窗 -->
    <el-dialog title="添加数据版本规则"
               :visible.sync="addTableShow"
               width="60%">
      <el-form :model="addListForm"
               ref="addFormRefs"
               :rules="addFormRules"
               label-position="right"
               label-width="120px">
        <el-form-item label="规则名称："
                      prop="ruleName">
          <el-input v-model="addListForm.ruleName"
                    placeholder="规则名称"></el-input>
        </el-form-item>
        <el-form-item label="制作对象："
                      prop="formulateObject">
          <el-select v-model="addListForm.formulateObject">
            <el-option :label="item.dictName"
                       v-for="item in labelListData2"
                       :key="item.dictId"
                       :value="item.dictId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规则描述："
                      prop="ruleDescription">
          <el-input v-model="addListForm.ruleDescription"
                    placeholder="规则描述"></el-input>
        </el-form-item>
        <el-form-item label="规则表达式：">
          <el-input v-model="addListForm.ruleExpression"
                    placeholder="规则表达式"></el-input>
        </el-form-item>
        <el-form-item label="启用状态：">
          <el-switch v-model="addListForm.status"></el-switch>
        </el-form-item>
        <el-form-item>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addTableShow = false;addListForm={remarks:'',typeName: ''}">取 消</el-button>
        <el-button type="primary"
                   @click="onSubmitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moreUseApi from '@/httpUtils/MoreUse/moreUse'
export default {
  name: "RuleManagement",
  components: {
    // homeView
  },
  props: {
    // msg: String //  [name: typeof]
  },
  filters: {},
  computed: {},
  watch: {},
  data () {
    return {
      options: [],
      value: [],
      list: [],
      labelListData: [
        {
          dictId: '',
          dictName: '全部'
        }
      ],
      Loading: false,
      name: "",
      object: "",
      tableData: [],
      selectData: [],
      labelListData2: [],
      ruleName: '',
      formulateObject: '',
      addTableShow: false,
      page: {
        pageNum: 1,
        pageSize: 5,
        total: 10,
        ruleName: '',
        formulateObject: '',
        idea: 1
      },
      addListForm: {
        ruleName: '',
        formulateObject: '',
        ruleDescription: '',
        ruleExpression: '',
        status: '',
      },
      addFormRules: {
        ruleName: [
          { required: true, message: '规则名称', trigger: 'blur' },
        ],
        formulateObject: [
          { required: true, message: '制作对象', trigger: 'blur' },
        ]
      }
    };
  },
  watch: {
    page: {
      handler (newName, oldName) {
        moreUseApi.queryDataVersionRuleInfo(this.page).then(res => {
          this.tableData = res.data.data.list
          this.page.total = res.data.data.total
          this.page.pageNum = res.data.data.pageNum
          this.page.pageSize = res.data.data.pageSize
        })
      },
      immediate: true,
      deep: true
    }
  },
  created () { },
  mounted () {
    // 查询所有标签下拉列表接口
    moreUseApi.queryDictInfoByType({ typeCode: '1000001510382536' }).then(res => {
      this.labelListData = [...this.labelListData, ...res.data.data]
      this.labelListData2 = res.data.data
      console.log(this.labelListData)
    })
  },
  methods: {
    //  多删
    deleteTableAll () {
      if (this.selectData.length === 0) return
      console.log(this.selectData)
      for (var item of this.selectData) {
        console.log(item)
        moreUseApi.deleteDataRuleByRuleId({ ruleId: item.ruleId }).then(res => {

        })
      }
      this.$message.success('删除成功')
      this.page.idea = this.page.idea++
    },
    //  点击添加按钮
    addTableList () {
      this.addTableShow = true
      this.addListForm = {
        ruleName: '',
        formulateObject: '',
        ruleDescription: '',
        ruleExpression: '',
        status: '',
      }
    },
    //  点击搜索按钮
    search () {
      console.log(this.ruleName, this.formulateObject)
      this.page.ruleName = this.ruleName
      this.page.formulateObject = this.formulateObject
    },
    //  删除
    deleteList (data) {
      console.log(data)
      moreUseApi.deleteDataRuleByRuleId({ ruleId: data.ruleId }).then(res => {
        if (res.data.code === 200) {
          this.$message.success('删除成功')
          this.page.idea = this.page.idea++
        } else {
          this.$message.error('服务器内部错误')
        }
      })
    },
    //  选中复选框
    selChange (data) {
      console.log(data)
      this.selectData = data
    },
    //  点击分页按钮
    changePage (pageNum) {
      console.log(pageNum)
      this.page.pageNum = pageNum
    },
    //  切换页数
    sizeChange (pageSize) {
      console.log(pageSize)
      this.page.pageSize = pageSize
    },
    //  添加数据版本规则点击确定按钮
    onSubmitForm () {
      this.$refs.addFormRefs.validate((valid) => {
        if (valid) {

          if (this.addListForm.status) {
            this.addListForm.status = '0'
          } else {
            this.addListForm.status = '1'
          }
          moreUseApi.addDataRule(this.addListForm).then(res => {
            if (res.data.code === 200) {
              this.$message.success('注册成功')
              this.addTableShow = false
              this.page.idea = this.page.idea++
            } else {
              this.$message.error('服务器内部错误')
            }
          })
        }
      })
    },
    //  点击停用/启用按钮
    showStatus (data) {
      console.log(data)
      if (data.status == "0") {
        var obj = {
          ruleId: data.ruleId,
          status: '1'
        }
      } else {
        var obj = {
          ruleId: data.ruleId,
          status: '0'
        }
      }
      moreUseApi.updateDataRuleById(obj).then(res => {
        if (res.data.code === 200) {
          this.$message.success('修改成功')
          this.page.idea = this.page.idea++
        } else {
          this.$message.error('服务器内部错误')
        }
      })

    },


  },
  destroyed () { }
};
</script>

<style scoped lang="less">
.homeLogic {
  width: 100%;
  height: 100%;
}
.top {
  > button {
    margin-left: 10px;
  }

  input {
    margin-left: 10px;
  }
  div {
    margin: 0px 10px;
  }
  .input-with-select {
    width: 200px;
  }
  .el-select {
    width: 200px;
  }
}
</style>
